<template>
  <div class="adminMyOrder">
    <div class="adminMsg" >
      <h2>我的预约</h2>
      <div class="title block">
        <span>预约列表</span>
        <span>预约状态</span>
        <span>操作</span>
      </div>
      <div v-for="(item,index) in currentList" :key="index">
        <div class="info block">
          <div class="imgTitle">
            <router-link :to="{ name: 'houseDetail', params: { id: item.houseId } }">
              <img :src="getFirstImage(item.houseImg)">
            </router-link>
            <div class="houseInfo">
              <h4>房屋标题:{{item.houseTitle}}</h4>
              <h4>预约时间：{{ item.datetime }}</h4>
            </div>
          </div>
          <div class="msg">
            <span :class="['status',getStatusType(item.status)]">{{ getOrderStatus(item.status) }}</span>
          </div>
          <div class="btn">
            <el-button v-if="item.status === -3" size="small" type="primary" @click="dialogVisible = true">驳回原因</el-button>
            <el-button size="small" type="danger" @click="">删除</el-button>
          </div>
          <el-dialog :visible.sync="dialogVisible" title="驳回记录" width="35%" @closed="handleDialogClose">
            <el-form>
              <el-form-item label="驳回原因">
                <el-input v-model="item.reason" :rows="3" readonly type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <span style="margin-left: 30px"><el-button type="danger" @click="handleDialogClose">关闭</el-button></span>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
        <div class="page">
          <el-pagination :current-page.sync="pageNum"
                         :page-size="pageSize"
                         :page-sizes="[3, 5, 7, 9, 20]"
                         :total="allList.length"
                         layout="total, sizes, prev, pager, next"
                         @current-change="handlePage"
                         @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script>
import axios from "axios";

const user = JSON.parse(localStorage.getItem("login-user"))
export default {
  name: "AdminMyOrder",
  data() {
    return {
      list:[],
      house:{
        status:'',
        houseImg:'',
        houseTitle:''
      },
      dialogVisible: false,
      pageNum:1,
      pageSize:5,
      allList:[],
      currentList:[],
      result:{
        reason:''
      }
    }
  },

  mounted() {
    this.getReservation();
  },
  methods: {

    handleSizeChange(size) {
      //console.log("当前显示数据数量为：",size)
      this.pageSize = size;

      this.pageNum = 1; // 重置到第一页

      this.handlePage(1,size)
    },

    handlePage(page) {
      this.pageNum = page;
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },

    getFirstImage(imgUrl){
      try {
        // 尝试解析JSON格式（兼容数组存储）
        const images = typeof imgUrl === 'string' ? JSON.parse(imgUrl) : imgUrl;
        return images?.[0]; // 返回首图或默认图
      } catch (e) {
        // 处理普通字符串格式（兼容旧数据）
        return imgUrl;
      }
    },

    openDialog() {
      this.dialogVisible = true
    },

    handleDialogClose(){
      this.dialogVisible = false
    },

    getReservation(){
      axios({
        url:'/reservation/get',
        methods: 'get'
      }).then(res=>{
        if (res.code === '200'){
          //console.log("返回的预约信息",res.data)
          //this.list = res.data

          this.allList = res.data

          this.handlePage(1);
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    //状态class
    getStatusType(status) {
      switch (status) {
        case -1:
          return 'status3';
        case 1:
          return 'status2';
        case -3:
          return 'status4';
        case -2:
          return 'status4';
      }
    },

    getOrderStatus(status){
      switch (status) {
        case -1:
          return "待处理";
        case 1:
          return "预约成功";
        case -3:
          return "已驳回";
        case -2:
          return "已超时";
      }
    },
  },
}
</script>

<style scoped>
.adminMyOrder{
  width: 100%;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg{
  width: 100%;
  min-height: 850px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 90px 10px 20px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2 {
  font-size: 20px;
  font-weight: 600;
  margin-buttom: 15px;
  margin-left: 0px;
}

.page{
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}

.block{
  display: block;
  display: flex;
  align-items: center;
  width: 1195px;
}

.block> :first-child{
  flex: 4;
}

.block> :nth-child(n+2){
  flex: 2;
  text-align: center;
}

.title{
  height: 50px;
  background-color: #4b5fff;
  color: white;
  padding-left: 20px;
  margin-top: 20px;
}

.info{
  height: 200px;
  padding:50px 20px;
  border-bottom: 1px solid #eee;
}

.info img{
  padding-top: 15px;
  width: 200px;
  height: 220px;
}

.info .msg{
  color: #777;
}

.imgTitle{
  display: flex;
}

.houseInfo{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.houseInfo h3{
  font-size: 18px;
  font-weight: 600;
}

.houseInfo p{
  font-size: 14px;
  color: #777;
}

.houseInfo span{
  padding: 3px 10px;
  width: 150px;
  font-size: 12px;
  color: #777;
  background-color: #eee;
}

.msg span{
  padding: 3px 10px;
  width: 150px;
  font-size: 12px;
  color: #777;
  background-color: #eee;
}

span.status{
  color: #fff;
  border-radius: 5px;
  font-size:medium;
}
.orderStatus{
  color: #4b5fff;
}

span.status1 {
  background-color: black;
}

span.status2 {
  background-color: #20ab6c;
}

span.status3 {
  background-color: #e91e65;
}

span.status4 {
  background-color: #f0ad4e;
}

span.status5 {
  background-color: #d9534f;
}
</style>